<template>
  <div class="user_center">
    <div class="u_title">用户中心</div>
    <div class="u_info">
      <div>
        <a href="#" class="u_title_img">
          <img src="../../../static/images/people.png" class="people_img"/>
        </a>
      </div>
      <div>
        <div><span class="user_name">化海天堂&nbsp;</span> <a href="#">[修改密码]</a></div>
        <div>访问时间：2015-5-5 5:55</div>
      </div>
    </div>
    <div>
      <dl>
        <dt class="user_center_list"><a href="#"><img src="../../../static/images/m_i_1.png" alt=""/>订单中心</a></dt>
        <dd>
          <ul class="active user_center_list_details">
            <li><a href="#">我的订单</a></li>
            <li><a href="#">收货中心</a></li>
            <li><a href="#">缺货登记</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt class="user_center_list"><a href="#"><img src="../../../static/images/m_i_2.png" alt=""/>会员中心</a></dt>
        <dd>
          <ul class="user_center_list_details">
            <li><a href="#">用户信息</a></li>
            <li><a href="#">我的收藏</a></li>
            <li><a href="#">我的留言</a></li>
            <li><a href="#">我的标签</a></li>
            <li><a href="#">我的推荐</a></li>
            <li><a href="#">我的评论</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt class="user_center_list"><a href="#"><img src="../../../static/images/m_i_3.png" alt=""/>账户中心</a></dt>
        <dd>
          <ul class="user_center_list_details">
            <li><a href="#">我的红包</a></li>
            <li><a href="#">我的团购</a></li>
            <li><a href="#">跟踪包裹</a></li>
            <li><a href="#">资金管理</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt class="user_center_list"><a href="#"><img src="../../../static/images/m_i_4.png" alt=""/>分销中心</a></dt>
        <dd>
          <ul class="user_center_list_details">
            <li><a href="#">店铺管理</a></li>
            <li><a href="#">我的盟友</a></li>
            <li><a href="#">我的佣金</a></li>
            <li><a href="#">申请提现</a></li>
          </ul>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
  export default{}
</script>

<style>

  .user_center{
    height:400px;
    width:200px;
    margin:0;
    float:left;
  }

  .user_center>.u_title{
    height:40px;
    background-color:black;
    color:white;
    font-size:20px;
    text-align:center;
    line-height:40px;

  }
  .user_center>.u_info{
    text-align:center;
  }

  .user_center .people_img{
    width:90px;
    height:90px;
    text-align:center;
  }

  .user_center .user_name{
    font-size:20px;
    color:red;
  }

  .user_center .user_center_list{
    height:36px;
    background-color:#ededed;
    line-height:36px;
    padding-left:10px;
    font-size:14px;
    border-bottom:1px solid #ddd;
  }

  .user_center .user_center_list_details{
    display:none;
    padding-left:30px;
  }

  .user_center .user_center_list_details li{
    margin:10px 0;
  }

  .user_center .active{
    display:block;
  }
</style>
